<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水逆退散局 - 个人中心</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/tailwind.css">
</head>
<body class="bg-gray-100">
  <div class="phone-frame mx-auto">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>20:30</span>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 微信小程序顶部导航 -->
    <div class="wechat-header">
      <span>个人中心</span>
    </div>
    
    <!-- 主内容区域 -->
    <div class="app-content p-4 bg-gray-50">
      <!-- 用户信息卡片 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-5">
        <div class="flex items-center">
          <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white text-2xl font-bold mr-4">
            张
          </div>
          <div>
            <h2 class="text-lg font-bold">张先生</h2>
            <p class="text-gray-500 text-sm">金牛座</p>
            <div class="flex items-center mt-1">
              <span class="text-xs text-gray-400">1990年5月12日</span>
              <span class="mx-2 text-gray-300">|</span>
              <span class="text-xs text-gray-400">未时</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 我的运势记录 -->
      <div class="bg-white rounded-lg shadow-md mb-5">
        <div class="p-4 border-b border-gray-100">
          <h3 class="font-bold text-gray-800">我的运势记录</h3>
        </div>
        
        <div class="divide-y divide-gray-100">
          <div class="p-4">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-gray-800 font-medium">2024年6月15日</div>
                <div class="text-xs text-gray-500 mt-1">今日运势: 良好</div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-2">
                  80
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
              </div>
            </div>
          </div>
          
          <div class="p-4">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-gray-800 font-medium">2024年6月14日</div>
                <div class="text-xs text-gray-500 mt-1">今日运势: 一般</div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 mr-2">
                  65
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
              </div>
            </div>
          </div>
          
          <div class="p-4">
            <div class="flex justify-between items-center">
              <div>
                <div class="text-gray-800 font-medium">2024年6月13日</div>
                <div class="text-xs text-gray-500 mt-1">今日运势: 优秀</div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-2">
                  90
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
        
        <div class="p-3 text-center">
          <a href="#" class="text-sm text-blue-500">查看更多记录</a>
        </div>
      </div>
      
      <!-- 设置选项 -->
      <div class="bg-white rounded-lg shadow-md mb-16">
        <div class="divide-y divide-gray-100">
          <div class="p-4 flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                <i class="fas fa-bell text-purple-500"></i>
              </div>
              <span class="text-gray-800">每日运势提醒</span>
            </div>
            <div class="relative inline-block w-12 h-6">
              <input type="checkbox" id="toggle" class="sr-only" checked>
              <div class="block bg-blue-500 w-12 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform translate-x-6"></div>
            </div>
          </div>
          
          <div class="p-4 flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <i class="fas fa-user-edit text-green-500"></i>
              </div>
              <span class="text-gray-800">修改个人信息</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
          
          <div class="p-4 flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                <i class="fas fa-share-alt text-yellow-500"></i>
              </div>
              <span class="text-gray-800">分享给好友</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
          
          <div class="p-4 flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <i class="fas fa-info-circle text-blue-500"></i>
              </div>
              <span class="text-gray-800">关于我们</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
          
          <div class="p-4 flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
                <i class="fas fa-trash text-red-500"></i>
              </div>
              <span class="text-gray-800">清除缓存</span>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-gray-200 flex justify-around items-center" style="width: 374px;">
      <a href="home.html" class="flex flex-col items-center">
        <i class="fas fa-home text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center">
        <i class="fas fa-history text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">历史</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center">
        <i class="fas fa-user text-xl text-blue-500"></i>
        <span class="text-xs mt-1 text-blue-500">我的</span>
      </a>
    </div>
  </div>
</body>
</html> 